.with-indent {
  & {
    --padding-h: -1rem;

    @screen lg {
      --padding-h: -45px;
    }
  }

  :global {
    .paragraph:first-child {
      margin-bottom: 4rem;
    }

    ul .indent,
    .paragraph .indent {
      border-bottom: 1px solid;

      /* @apply border-accent/20 dark:border-accent/20; */
      @apply border-accent/10;

      @media print {
        @apply border-none;
      }
    }

    blockquote {
      & {
        .paragraph > span.indent {
          margin-left: 0 !important;
        }

        .paragraph:first-child::first-letter {
          float: none !important;
          font-size: inherit !important;
          margin: 0;
        }

        .paragraph,
        blockquote > ph {
          padding: 10px 0;
          margin: 0;
        }

        .paragraph:first-child {
          margin-bottom: 0;
        }
      }

      margin-left: var(--padding-h);
      margin-right: var(--padding-h);

      line-height: 1.8;
      padding: 1em 1em 1em 2em;

      @apply bg-accent/20 font-normal dark:bg-accent/5;
      @apply border-none px-12 !outline-none;

      & span::first-letter {
        @apply !float-none !text-[1em];
      }

      @media screen and (max-width: 599px) {
        max-width: 100vw;
        margin-left: -1.25em;
        margin-right: -1.25em;
        padding: 1em 3em;
      }
    }

    .paragraph:not(:nth-child(1)) > span.indent {
      &:nth-child(1) {
        margin-left: 2rem;
      }
    }

    main {
      > p:first-child {
        margin-bottom: 2rem;
      }

      .paragraph:first-child::first-letter {
        float: left;
        font-size: 2.4em;
        margin: 0 0.2em 0 0;
      }
    }
  }
}

.with-serif {
  :global {
    main {
      @apply font-serif text-lg leading-[1.8];
    }

    strong,
    b {
      @apply font-sans;
    }
  }
}
